<template>
	<view class="content">
		<view style="padding: 30rpx;">
			<view style="display: flex;align-items: center;">
				<view style="width: 150rpx;height: 150rpx;border-radius: 50%;background-color: beige;">
					<image :src="avatarUrl" style="width: 150rpx;height: 150rpx;border-radius: 50%;" mode=""></image>
				</view>
				<view>
					<text style="font-size: 42rpx;margin: 0rpx 20rpx;">你好！</text>
					<text style="font-size: 48rpx;">{{ username }}</text>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 40rpx;">
				<view @click="toConsultation"
					style="display: flex;background-color: #26bf00;width: 42%;padding: 20rpx;height: 140rpx;border-radius: 25rpx;">
					<image src="/static/tap.png" style="width: 100rpx;height: 100rpx;" mode=""></image>
					<text style="font-size: 48rpx;color: white;font-weight: 700;">在线问诊</text>
				</view>
				<view @click="toBooking"
					style="display: flex;background-color: #00b7e1;width: 42%;padding: 20rpx;height: 140rpx;border-radius: 25rpx;">
					<image src="/static/tab.png" style="width: 100rpx;height: 100rpx" alt="" srcset="" />
					<text style="font-size: 48rpx;color: white;font-weight: 700;">预约挂号</text>
				</view>
			</view>
			<view style="margin: 50rpx 0;display: flex;justify-content: space-between;">
				<view style="padding: 18rpx;background-color: white;border-radius: 30rpx;" @click="gobook">
					<image src="/static/type1.png" style="width: 125rpx;height: 100rpx;" mode=""></image>
				</view>
				<view style="padding: 18rpx;background-color: white;border-radius: 30rpx;" @click="goyao">
					<image src="/static/type2.png" style="width: 125rpx;height: 100rpx;" mode=""></image>
				</view>
				<view style="padding: 18rpx;background-color: white;border-radius: 30rpx;" @click="toyao">
					<image src="/static/type3.png" style="width: 125rpx;height: 100rpx;" mode=""></image>
				</view>
				<view style="padding: 10rpx;background-color: white;border-radius: 25rpx;" @click="goremind">
					<image src="/static/type4.png" style="width: 140rpx;height: 120rpx;" mode=""></image>
				</view>
			</view>
			<view style="padding: 30rpx; background-color: white; border-radius: 25rpx; position: relative;">
				<!-- 背景层 -->
				<view style="position: absolute; 
			              top: 60rpx; 
			              left: 66rpx; 
			              background-color: #20ff00; 
			              width: 140rpx; 
			              height: 20rpx; 
			              z-index: 1;"></view>

				<!-- 文字层 -->
				<view style="font-weight: 700;
			              font-size: 34rpx;
			              font-style: italic;
			              position: relative;
			              z-index: 2;">健康新闻</view>
				<view style="margin: 20rpx 0rpx; display: flex;justify-content: space-between;" v-for="item in newsList"
					:key="item.id" @click="goNewsDetail(item.id)">
					<view class="" style="margin: 20rpx;">
						<view class="" style="font-size: 18px;">{{ item.title }}</view>
						<view class="" style="display: flex;justify-content: space-between;">
							<text style="margin-right: 20px;margin-top: 19px;">热度{{ item.hot }}</text>
							<text style="margin-top: 19px;">{{ item.date }}</text>
						</view>
					</view>
					<image :src="item.img" style="border-radius: 15rpx;width: 150px;height: 94px;" mode="">
					</image>
				</view>
			</view>
			<view
				style="height: 300rpx;padding: 30rpx; background-color: white; border-radius: 25rpx; position: relative;margin-top: 30rpx;">
				<!-- 背景层 -->
				<view style="position: absolute; 
			              top: 60rpx; 
			              left: 66rpx; 
			              background-color: #20ff00; 
			              width: 140rpx; 
			              height: 20rpx; 
			              z-index: 1;"></view>

				<!-- 文字层 -->
				<view style="font-weight: 700;
			              font-size: 34rpx;
			              font-style: italic;
			              position: relative;
			              z-index: 2;">社区活动</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted,onUnmounted } from 'vue'
declare const uni: any;

interface NewsItem {
	id: number | string;
	title: string;
	hot: number | string;
	date: string;
	img: string;
}

let username = ref('用户名')
let avatarUrl = ref('/static/doctor.png')
const newsList = ref<NewsItem[]>([])
const toConsultation = () => {
	uni.navigateTo({
		url: '/pages/Consultation/Consultation'
	})
}
const toBooking = () => {
	uni.navigateTo({
		url: '/pages/booking/booking'
	})
}
onMounted(() => {
	// 用户信息
	const userInfo = uni.getStorageSync('userInfo')
	if (userInfo && userInfo.avatar) {
		avatarUrl.value = userInfo.avatar
	}
	if (userInfo && userInfo.name) {
		username.value = userInfo.name
	}

	// 获取新闻列表
	fetchNewsList()
})

function fetchNewsList() {
	const token = uni.getStorageSync('token')
	uni.request({
		url: 'http://localhost:3010/news/list?page=1&pagenum=2',
		method: 'GET',
		header: {
			'Authorization': 'Bearer ' + token
		},
		success: (res) => {
			console.log(res);
			// 适配后端返回结构
			if (
				res.data &&
				res.data.code === 200 &&
				res.data.data &&
				Array.isArray(res.data.data.data)
			) {
				const formatISODate = (isoString: string): string => {
					if (!isoString) return '';
					const date = new Date(isoString);
					return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
				};
				newsList.value = res.data.data.data.map((item: any) => ({
					id: item.nid,
					title: item.title,
					hot: item.hot,
					date: item.create_time ? formatISODate(item.create_time) : '',
					img: item.cover
				}))
			}
		},
		fail: (err) => {
			uni.showToast({ title: '新闻获取失败', icon: 'none' })
		}
	})
}

function goNewsDetail(nid: string | number) {
	uni.navigateTo({
		url: `/pages/detail/detail?nid=${nid}`
	})
}

// 获取新闻列表
fetchNewsList()
	

function goyao() {
	uni.switchTab({
		url: '/pages/cart/cart'
	})
}
function gobook() {
	uni.navigateTo({
		url: '/pages/treasure/treasure'
	})
}
const toyao = () => {
	uni.navigateTo({
		url: '/pages/community/community'
	});
}
const goremind = () => {
	uni.navigateTo({
		url: '/pages/remind/remind'
	});

}

// 在 index.vue 的 setup 中添加
onMounted(() => {
  uni.$on('userInfoUpdated', handleUserInfoUpdate)
})

onUnmounted(() => {
  uni.$off('userInfoUpdated', handleUserInfoUpdate)
})

const handleUserInfoUpdate = (updatedUserInfo) => {
  username.value = updatedUserInfo.name
  avatarUrl.value = updatedUserInfo.avatar
}
</script>

<style>
.content {
	width: 100vw;
	height: 100vh;
	background-color: #e1e1e1;
	padding-top: 100rpx;
	box-sizing: border-box;
}
</style>